<template>
  <div class="top_menu">
    <!-- 作业统计报表下载窗口 -->
    <el-dialog :title="title" :visible.sync="VisibleZIP" width="850px">
      <el-row :gutter="8">
        <el-col :span="8">
          <el-form ref="form" :model="form">
            <el-form-item label="开始日期：">
              <el-date-picker
                style="width: 140px"
                v-model="form.StartDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="expireTimeOption"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <el-form ref="form" :model="form">
            <el-form-item label="结束日期：">
              <el-date-picker
                style="width: 140px"
                v-model="form.EndDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="expireTimeOption"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" v-show="form.currentService == '006'">
            <el-form-item label="模块：">
              <el-select
                style="width: 120px"
                v-model="form.downloadTypeValue"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in form.downloadTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="1">
          <el-button
            style="height: 26px"
            size="mini"
            type="primary"
            @click="getDownloadData"
            >查 询</el-button
          >
        </el-col>
      </el-row>
      <el-table
        highlight-current-row
        :data="downloadData"
        style="width: 100%"
        fit
        border
        @row-dblclick="downloadExcel"
      >
        <el-table-column
          prop="downloadUrlName"
          label="文件下载列表"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-download"
              @click="downloadExcel(scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 实时在线统计窗口 -->
    <el-dialog :title="title" :visible.sync="Visible">
      <div>
        <el-tabs type="border-card" style="min-height: 350px">
          <el-tab-pane label="全部" v-if="isShowTab.comprehensive">
            <el-table :data="statisticalData" style="width: 100%"  border>
              <el-table-column
                prop="类型"
                label="类型"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="在线数量"
                label="在线数量(作业)"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="全部数量"
                label="全部数量"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="在线率"
                label="在线率"
                align="center"
              ></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="环卫队" v-if="isShowTab.worker">
            <el-table
              highlight-current-row
              :data="statisticalDataWorker"
              style="width: 100%"
              
              border
            >
              <el-table-column
                prop="名称"
                label="班组名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="在线数量"
                label="在线人数(作业)"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="全部数量"
                label="全部人数"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="在线率"
                label="在线率"
                align="center"
              ></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="机扫车" v-if="isShowTab.vehicle">
            <el-table
              highlight-current-row
              :data="statisticalDataCar"
              style="width: 100%"
              
              border
            >
              <el-table-column
                prop="类型"
                label="类型"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="在线数量"
                label="在线数量(作业)"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="全部数量"
                label="全部数量"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="在线率"
                label="在线率"
                align="center"
              ></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="垃圾车" v-if="isShowTab.rubbish">
            <el-table
              highlight-current-row
              :data="statisticalDataRubbish"
              style="width: 100%"
              
              border
            >
              <el-table-column
                prop="类型"
                label="类型"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="在线数量"
                label="在线数量(作业)"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="全部数量"
                label="全部数量"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="在线率"
                label="在线率"
                align="center"
              ></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="维保队" v-if="isShowTab.wc">
            <el-table
              highlight-current-row
              :data="statisticalDataWCWorker"
              style="width: 100%"
              
              border
            >
              <el-table-column
                prop="类型"
                label="类型"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="在线数量"
                label="在线数量(作业)"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="全部数量"
                label="全部数量"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="在线率"
                label="在线率"
                align="center"
              ></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
    <!-- 油耗曲线图 -->
    <el-dialog
      :title="dyclyhLinedialogTitle"
      :visible.sync="dyclyhLinedialogVisible"
      width="900px"
    >
      <el-row :gutter="2">
        <el-col :span="10">
          <el-form ref="form" :model="form">
            <el-form-item label="开始日期：">
              <el-date-picker
                v-model="form.startDateLine"
                type="datetime"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期：" >
              <el-date-picker
                v-model="form.endDateLine"
                type="datetime"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <!-- <el-form-item label="车牌号：">
              <el-select v-model="dyclyhlc.cph" placeholder="请选择">
                <el-option
                  v-for="item in dyclyhlc.cphList"
                  :key="item.index"
                  :label="item.LicensePlate"
                  :value="item.LicensePlate"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="时间间隔：">
              <el-select
                style="width: 100px"
                v-model="form.timeIntervalValue"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in form.timeIntervalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="dyclyhLineSearchClick"
              >查 询</el-button
            >
          </el-form>
        </el-col>
      </el-row>
      <!-- 统计列表 -->
      <div style="width: 100%; height: 500px" id="dyclyhLinediv"></div>
    </el-dialog>
  </div>
</template>

<script>
import '@/assets/css/common.css'
import * as echarts from 'echarts';
import { formatDate } from '@/common/js/date.js'
import eventBus from '@/eventBus.js'
export default {
  data () {
    return {
      expireTimeOption: {
        disabledDate (date) {
          // disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          return date.getTime() >= new Date(new Date() - 3600 * 1000 * 24)
        }
      },
      // 是否显示实时在线统计对话框
      form: {
        StartDate: formatDate(new Date(new Date() - 3600 * 1000 * 24 * 2), 'yyyy-MM-dd'),
        EndDate: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
        startDateLine: formatDate(new Date(new Date() - 3600 * 1000 * 24 * 2), 'yyyy-MM-dd hh:mm:ss'),
        endDateLine: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd hh:mm:ss'),
        timeIntervalList: [{ label: '10分钟', value: '10' }, { label: '30分钟', value: '30' }, { label: '1小时', value: '60' }],
        timeIntervalValue: '10',
        downloadTypeValue: '001',
        downloadTypeList: [{ label: '道路机扫', value: '001' },
        { label: '垃圾收运', value: '003' },
        { label: '人工保洁', value: '002' },
        { label: '公厕维保', value: '004' }],
        currentService: '',
      },
      title: '',
      Visible: false,
      VisibleZIP: false,
      downloadData: [],
      statisticalData: [],
      statisticalDataWorker: [],
      statisticalDataCar: [],
      statisticalDataRubbish: [],
      statisticalDataWCWorker: [],
      showWarningInfo: false,
      isFull: false,
      isShowTab: {
        vehicle: true,
        rubbish: false,
        worker: false,
        wc: false,
        comprehensive: false
      },
      dyclyhLinedialogVisible: false,
      dyclyhLinedialogTitle: '',
      dyclyhLinedialogID: '',
      dyclyhLinedialogEchart: null
    }
  },
  created () {
    this.form.currentService = localStorage.getItem('CurrentService')
    // 实时在线统计
    eventBus.$on('HYEcharts_Vehicle', val => {
      if (this.dyclyhLinedialogEchart) {
        this.dyclyhLinedialogEchart.clear()
      }
      this.dyclyhLinedialogTitle = '油耗曲线 - ' + val.CarName;
      this.dyclyhLinedialogID = val.CarID;
      this.dyclyhLinedialogVisible = true;
    })
    // 作业报表下载
    eventBus.$on('Download_Vehicle', () => {
      this.title = '作业统计报表下载'
      this.VisibleZIP = true
       this.getDownloadData()
    })
    // 当日作业报表下载
    eventBus.$on('Download_Vehicle_Today', () => {
      this.title = '当日作业统计报表下载'
      this.VisibleZIP = true
      this.getDownloadData()
    })
    // 实时在线统计
    eventBus.$on('Realtime_Shortcut_Vehicle', () => {
      this.isShowTab.vehicle = true
      this.isShowTab.rubbish = false
      this.isShowTab.worker = false
      this.isShowTab.wc = false
      this.isShowTab.comprehensive = false
      this.getDataRealTime()
      this.Visible = true
    })
    eventBus.$on('Realtime_Shortcut_Rubbish', () => {
      this.isShowTab.vehicle = false
      this.isShowTab.rubbish = true
      this.isShowTab.worker = false
      this.isShowTab.wc = false
      this.isShowTab.comprehensive = false
      this.getDataRealTime()
      this.Visible = true
    })
    eventBus.$on('Realtime_Shortcut_Worker', () => {
      this.isShowTab.vehicle = false
      this.isShowTab.rubbish = false
      this.isShowTab.worker = true
      this.isShowTab.wc = false
      this.isShowTab.comprehensive = false
      this.getDataRealTime()
      this.Visible = true
    })
    eventBus.$on('Realtime_Shortcut_WC', () => {
      this.isShowTab.vehicle = false
      this.isShowTab.rubbish = false
      this.isShowTab.worker = false
      this.isShowTab.wc = true
      this.isShowTab.comprehensive = false
      this.getDataRealTime()
      this.Visible = true
    })
    eventBus.$on('Realtime_Shortcut_Comprehensive', () => {
      this.isShowTab.vehicle = true
      this.isShowTab.rubbish = true
      this.isShowTab.worker = true
      this.isShowTab.wc = true
      this.isShowTab.comprehensive = true
      this.getDataRealTime()
      this.Visible = true
    })
  },
  methods: {
    async dyclyhLineSearchClick () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var urlStr = 'http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose01?sqlName=dlhw&url=exec [GetOilHistoryLine] ' + this.dyclyhLinedialogID + ',' + this.form.timeIntervalValue + ',"' + this.form.startDateLine + '","' + this.form.endDateLine + '"'
      console.log(urlStr)
      let { data } = await this.$Http.get(urlStr)
      loading.close();
      // 绘制图表
      this.dyclyhLinedialogEchart = echarts.init(document.getElementById('dyclyhLinediv'));
      this.dyclyhLinedialogEchart.setOption(
        {
          xAxis: {
            type: 'category',
            data: data.categories
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            type: 'line',
            smooth: true,
            data: data.data
          }]
        });
    },
    async getDownloadData () {
      let title = localStorage.getItem('USERNAME')
      let type = localStorage.getItem('CurrentService')
      if (type === '006') {
        type = this.form.downloadTypeValue
      }
      if (type === '001') {
        title += ' 机扫队 '
      }
      if (type === '003') {
        title += ' 收运队 '
      }
      if (type === '002') {
        title += ' 清扫队 '
      }
      if (type === '004') {
        title += ' 维保队 '
      }
      var url = 'DataListCompany/GetzyltjApi?dtpStartDate=' + this.form.StartDate + '&dtpEndDate=' + this.form.EndDate + '&ClientName=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      data.forEach(element => {
        element.downloadUrlName = title + element.downloadUrl
      });
      this.downloadData = data
    },
    downloadExcel (row) {
      let downloadUrl = 'http://111.160.78.62:8088/zylbde/'//东丽博德尔
      // let downloadUrl = 'http://111.160.78.62:8088/zylfj/'//福建
      
      // let downloadUrl = 'http://111.160.78.62:9906/zyldc/'//大厂
      // if(localStorage.getItem('CLIENT_NO').includes('0000001')) {
      //   downloadUrl = 'http://111.160.78.62:9906/zylglx/'//广灵县
      // }

      let type = localStorage.getItem('CurrentService')
      if (type === '006') {
        type = this.form.downloadTypeValue
      }
      if (type === '001') {
        downloadUrl += row.index + '东丽区.zip'
        // downloadUrl += row.index + '.zip'
      }
      if (type === '003') {
        downloadUrl += '东丽区垃圾作业' + row.index + '.zip'//东丽
        // downloadUrl += '垃圾作业' + row.index + '.zip'
      }
      if (type === '002') {
        downloadUrl += '人工作业' + row.index + '.zip'
      }
      if (type === '004') {
        downloadUrl += '公厕作业' + row.index + '.zip'
      }
      if (this.title.includes('当日')){
        downloadUrl = 'http://111.160.78.62:8088/zylbde/' + row.index + '东丽区16.zip'
      }
      window.open(downloadUrl, '_blank')
      // http://111.160.78.62:8088/zylbde/2021-06-23东丽区.zip
      // http://111.160.78.62:8088/zylbde/东丽区垃圾作业2021-06-23.zip
      // http://111.160.78.62:8088/zylbde/人工作业2021-06-23.zip
      // http://111.160.78.62:8088/zylbde/公厕作业2021-06-23.zip
      // let downloadUrl = 'http://111.160.78.62:9906/zylbde/人工作业' + row.index + '.zip'
    },
    getDataRealTime () {
      this.title = '实时在线统计  ' + new Date().toLocaleDateString() + ' - ' + new Date().toTimeString().split(' ')[0]
      this.onlineStatistics()
      this.onlineStatisticsWorker()
      this.onlineStatisticsCar()
      this.onlineStatisticsRubbish()
      this.onlineStatisticsWCWorker()
    },
    // 实时在线统计
    async onlineStatistics () {
      // var url = `/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=${this.$route.query.StreetNo}`
      // http://111.160.78.62:9942/GarbagePointsApi/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=2
      var url = 'Comprehensive/GetVehicleCurrentInfo?ClientNo=' + localStorage.getItem('CLIENT_NO') + '&typeName=&typeQuery=1'
      const { data } = await this.$Http.get(url)
      this.statisticalData = data
    },
    async onlineStatisticsWorker () {
      // var url = `/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=${this.$route.query.StreetNo}`
      // http://111.160.78.62:9942/GarbagePointsApi/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=2
      // var url = 'Comprehensive/GetVehicleCurrentInfo?ClientNo=' + localStorage.getItem('CLIENT_NO') + '&typeName=' + '环卫队'
      var url = '/DataListCompany/GetWorkerStatisticsInfoApi?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      data.forEach(element => {
        element.名称 = element.名称
        element.在线数量 = element.在线人数
        element.全部数量 = element.全部人数
        element.在线率 = (element.在线人数 / element.全部人数 * 100).toFixed(2) + '%'
      });
      this.statisticalDataWorker = data
    },
    async onlineStatisticsCar () {
      // var url = `/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=${this.$route.query.StreetNo}`
      // http://111.160.78.62:9942/GarbagePointsApi/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=2
      var url = 'Comprehensive/GetVehicleCurrentInfo?ClientNo=' + localStorage.getItem('CLIENT_NO') + '&typeName=' + '机扫&typeQuery=1'
      const { data } = await this.$Http.get(url)
      this.statisticalDataCar = data
    },
    async onlineStatisticsRubbish () {
      // var url = `/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=${this.$route.query.StreetNo}`
      // http://111.160.78.62:9942/GarbagePointsApi/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=2
      var url = 'Comprehensive/GetVehicleCurrentInfo?ClientNo=' + localStorage.getItem('CLIENT_NO') + '&typeName=' + '垃圾&typeQuery=1'
      const { data } = await this.$Http.get(url)
      this.statisticalDataRubbish = data
    },
    async onlineStatisticsWCWorker () {
      // var url = `/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=${this.$route.query.StreetNo}`
      // http://111.160.78.62:9942/GarbagePointsApi/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=2
      var url = 'Comprehensive/GetVehicleCurrentInfo?ClientNo=' + localStorage.getItem('CLIENT_NO') + '&typeName=' + '公厕维保&typeQuery=1'
      const { data } = await this.$Http.get(url)
      this.statisticalDataWCWorker = data
    },
  },
  // mounted () {
  //   // 监听键盘按ESC键
  //   let self = this;
  //   this.$nextTick(function () {
  //     document.addEventListener('keyup', function (e) {
  //       if (e.keyCode == 27) {
  //         self.exitFullscreen();
  //       }
  //     })
  //   })
  // }
}
</script>

<style scoped lang="less">
.top_menu {
  height: 0px;
  width: 0px;
}
/deep/ .el-button--mini {
  padding: 4px 8px;
  margin-left: 5px;
  span {
    font-size: 12px;
  }
}
</style>